<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax长轮询测试</title>
    <style type="text/css">
        body {
            padding: 30px
        }

        .ver-layout-center {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hor-layout-center {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #request-status {
            visibility: visible;
            opacity: 1;
            color: blue;
            font-weight: bold;
            transition: all 1s linear;
        }

        #request-status.hide {
            visibility: hidden;
            opacity: 0;
        }

        #count-num {
            width: 35px;
            height: 35px;
            font-size: 14px;
            line-height: 35px;
            text-align: center;
            background-size: 100% 100%;
            background-image: url("./progress.svg");
        }

        .btn-view {
            margin-bottom: 10px;
        }

        li.error {
            color: red;
        }
    </style>
</head>
<body>
<div class="ver-layout-center">
    <button class="btn-view" onclick="setValue()">设置value值</button>
    <div id="request-status" class="hor-layout-center hide">
        <div style="margin-right: 10px">getValue请求中</div>
        <div id="count-num"></div>
    </div>
    <ul id='content'></ul>
</div>
</body>
</html>
<script>
let countTimer = null

function getValue() {
  startCount()
  let xhr = new XMLHttpRequest();
  xhr.open('get', 'http://localhost:8084/ajax/getValue')
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({
    'robotCode': 'hn2twk',
    'channelCode': 'A',
    'sessQaType': 'QA',
    'sendTime': new Date().getTime(),
  }));
  xhr.onload = function () {
    clearCount()
    console.log("f-onload=======", xhr.responseText)
    let data = xhr.responseText
    addData(data)
    getValue()
  }
  xhr.onreadystatechange = function () {
    console.log("onreadystatechange==readyState", xhr.readyState)
    console.log("onreadystatechange==status", xhr.status)
  };
  xhr.onerror = function (e) {
    clearCount()
    console.log("onerror==readyState", xhr.readyState)
    console.log("onerror==status", xhr.status)
    setTimeout(() => {
      let errorMap = {'0': '请求失败！'}
      let data = `${errorMap[xhr.status]}  readyState=${xhr.readyState}&status=${xhr.status}`
      addData(data, true)
      getValue()
    }, 3000)
  };
}

function startCount() {
  document.getElementById('request-status').classList.remove('hide')
  let count = 0
  if (countTimer == null) countTimer = setInterval(() => {
    count++
    document.getElementById('count-num').innerText = count.toString()
  }, 1000)
}

function clearCount() {
  document.getElementById('request-status').classList.add('hide')
  if (countTimer != null) {
    clearInterval(countTimer)
    countTimer = null
  }
}

function addData(data, error = false) {
  let liDom = document.createElement("li")
  liDom.innerHTML = data
  if (error) liDom.classList.add('error')
  document.getElementById("content").appendChild(liDom)
  scrollContent()
}

function scrollContent() {
  let contentDom = document.getElementById("content")
  contentDom.scrollTop = contentDom.scrollHeight;
}

function setValue() {
  let xhr = new XMLHttpRequest();
  xhr.open('get', 'http://localhost:8084/ajax/setValue?msg=' + getCurrentTime())
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send();
  xhr.onload = function () {
    console.log("f1-onload=======", xhr.responseText)
    let {code, result, msg} = JSON.parse(xhr.responseText)
  }
}

const getCurrentTime = () => {
  let time = new Date();
  let year = time.getFullYear()
  let mm = time.getMonth() + 1
  mm = mm < 10 ? '0' + mm : mm
  let dd = time.getDate()
  dd = dd < 10 ? '0' + dd : dd
  let hh = time.getHours()
  let mf = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
  let ss = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
  let timeStr = `${year}${mm}${dd}-${hh}${mf}${ss}`
  return timeStr
}

getValue()

</script>
